<template>
  <header>
    <el-popover :width="170" trigger="click" :visible="isShowPopover" popper-class="popper" :offset="15" :hide-after="0">
      <template #reference>
        <el-icon class="popover-icon" :size="24" @click="isShowPopover = true"><ArrowRight /></el-icon>
      </template>
      <div class="close">
        <el-icon :size="16" @click.stop="isShowPopover = false"><Close /></el-icon>
      </div>
      <section class="popover-item" v-for="item in examList" :key="item.enName" @click="onOptionClick(item)">{{ item.name }}</section>
    </el-popover>
    <article>{{ currentExamName }}</article>
  </header>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { IExam } from '../../../../../type/index';

const emit = defineEmits(['onOptionClick', 'onInitExamEnName']);

onMounted(() => {
  emit('onInitExamEnName', examList);
});

const examList: IExam[] = [
  { name: 'Java基础', enName: 'javaBase' },
  { name: '数据库与Oracle', enName: 'dataBase' },
  { name: '项目一', enName: 'projectOne' },
  { name: '静态网页', enName: 'staticWeb' },
  { name: '动态网页', enName: 'dynamicWeb' },
  { name: '项目二', enName: 'projectTwo' },
  { name: 'Java与Oracle高级', enName: 'javaDatabasePro' },
  { name: '项目三', enName: 'projectThree' },
  { name: '期末考试', enName: 'finalExam' },
];
const isShowPopover = ref<boolean>();
const currentExamName = ref<string>(examList[0].name);

const onOptionClick = (item: IExam) => {
  currentExamName.value = item.name;
  emit('onOptionClick', item);
  isShowPopover.value = false;
};
</script>

<style lang="scss" scoped>
header {
  height: 60px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  padding: 0 16px;
  article {
    margin-left: 8px;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 4px;
  }
}

//popover中的样式必须写在外面
.popover-icon {
  cursor: pointer;
  transition: all 0.5s ease;
}
.popover-icon:hover {
  transform: rotate(90deg);
  transition: all 0.5s ease;
}
.popover-item {
  line-height: 30px;
  text-align: center;
  color: var(--font-color);
  cursor: pointer;
}
.popover-item:hover {
  background-color: var(--active-color);
}
.close {
  display: flex;
  justify-content: flex-end;
  padding: 10px 10px 0 0;
  cursor: pointer;
}
.close:hover {
  color: var(--active-color);
}
</style>
